<template>
  <div id="chat-window">
    <!-- 如果currentSession的accepter还是空对象 -->
    <div class="logo-wrapper" v-if="!currentSession.accepter.friendId">
      <span class="logo iconfont icon-weixin"></span>
    </div>
    <!-- currentSession有值 -->
    <div class="window-wrapper" v-else>
      <div class="window-header">{{currentAccepter.friendAlias}}</div>
      <div class="window-content">
        <div class="no-msg" v-if="currentMessages.length === 0">
          暂无消息，快发第一条消息吧
        </div>
        <div v-for="(message, index) in currentMessages" :key="index" :class="{'message-myself':message.isMyself, 'message-not-myself':!message.isMyself}">
          <img :src="message.isMyself?imgBaseUrl+userInfo.img:imgBaseUrl+currentAccepter.friendImg" alt="">
          <div class="msg">{{message.msg}}</div>
        </div>
      </div>
      <ChatInput :currentSession="currentSession"/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ChatInput from '@/components/ChatInput/ChatInput.vue'
export default {
  props: {
    currentSession: Object
  },
  computed: {
    ...mapState(['imgBaseUrl', 'userInfo']),
    currentAccepter () {
      return this.currentSession.accepter
    },
    currentMessages () {
      return this.currentSession.messages
    }
  },
  components: {
    ChatInput
  }
}
</script>

<style lang="stylus">
#chat-window
  position absolute
  left 310px
  top 0
  right 0
  bottom 0
  .logo-wrapper
    height 100%
    width 100%
    .logo
      position absolute
      left 50%
      top 50%
      transform translate(-50%,-50%)
      color #dcdbdb
      font-size 100px
  .window-wrapper
    height 100%
    width 100%
    .window-header
      height 76px
      padding-top 30px
      padding-left 35px
      border-bottom 1px solid #e0e0e0
      color #000
      font-size 24px
    .window-content
      position absolute
      top 76px
      bottom 180px
      left 0
      right 0
      border-bottom 1px solid #e0e0e0
      overflow auto
      .no-msg
        margin-top 30px
        text-align center
      .message-not-myself
        display flex
        padding 10px 50px
        img
          width 45px
          height 45px
        .msg
          max-width 280px
          background #fff
          border-radius 10px
          margin-left 15px
          padding 10px 15px
          font-size 19px
          color black
          word-break break-word
      .message-myself
        display flex
        padding 10px 50px
        flex-direction row-reverse
        img
          width 45px
          height 45px
        .msg
          max-width 280px
          background #b2e281
          border-radius 10px
          margin-right 15px
          padding 10px 15px
          font-size 19px
          color black
          word-break break-word
</style>
